<template>
  <div>
    <div
      style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 20px;
        text-align: center;
      "
    >
      产品类目
    </div>
    <!-- <van-search
      v-model="searchContent"
      placeholder="请输入搜索关键词"
      @search="search"
    /> -->
    <van-search
      v-model="searchContent"
      show-action
      placeholder="请输入搜索关键词"
      @search="search"
      @cancel="onCancel"
    />

    <div
      v-if="newP.obj && newP.obj.length > 0"
      style="
        flex-wrap: wrap;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div
        v-for="(i, index) in newP.obj"
        :key="index"
        style="
          width: calc((100vw - 160px) / 2);
          margin-right: 10px;
          margin-bottom: 10px;
          border-radius: 15px;
          text-align: center;
          padding: 20px;
          border: 1px solid #e3e3e3;
        "
      >
        <div>
          <img :src="i.img" style="border-radius: 15px; width: 100%" />
        </div>
        <div>
          <span>{{ i.name }}</span>
        </div>

        <div
          style="
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
          "
        >
          <span>{{ i.unit }}{{ i.price }}</span>
          <span @click.stop="addCart(i, index)" class="plus-product">+</span>
        </div>
      </div>
    </div>
    <div
      v-else
      style="
        flex-wrap: wrap;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div
        v-for="(i, index) in categorys"
        :key="index"
        @click="gotoCategoryDetails(i)"
        style="
          width: calc((100vw - 150px) / 2);
          margin-right: 10px;
          margin-bottom: 10px;
          border-radius: 15px;
          text-align: center;
          padding: 20px;
        "
        :style="{
          border: `1px solid ${i.color}`,
          backgroundColor: i.color,
          backgroundSize: cover,
        }"
      >
        <div>
          <img :src="i.img" style="border-radius: 15px; width: 100%" />
        </div>
        <div>
          <span>{{ i.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "../mixin.js";
const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let categorys = useUserStore.categorys;
let products = useUserStore.products;
let cartList = useUserStore.cartList;

let newP = reactive({ obj: [] });

let searchContent = ref("");

function gotoCategoryDetails(i) {
  window.localStorage.setItem("currentCategory", JSON.stringify(i));
  router.push("categoryDetails");
}
//综合搜索
function search(val) {
  newP.obj = [];
  products.forEach((element) => {
    if (element.name.indexOf(val) != -1) {
      newP.obj.push(element);
    }
  });
}
function addCart(i, index) {
  if (!i.num) {
    i.num = 1;
  }
  document.querySelectorAll(".plus-product")[index].classList.add("scale");
  setTimeout(() => {
    document.querySelectorAll(".plus-product")[index].classList.remove("scale");
  }, 300);

  i.totalPrice = i.price;
  let isExist = cartList.some((cartProduct) => {
    if (cartProduct.id == i.id) {
      cartProduct.num += 1;
      cartProduct.totalPrice = cartProduct.num * i.price;
      return true;
    }
  });
  if (!isExist) {
    cartList.push(i);
  }
  useUserStore.calcluteCart();
  successMsgBox("添加成功");
}
</script>
